<template>
  <div class="contend">
    <!-- banner -->
    <section class="bannerBox">
      <div v-swiper:mySwiper="swiperOption" class="swiper-container banner">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, idx) in bannerData"
            :key="idx"
          >
            <img :src="item.imgUrl" class="img1" />
          </div>
        </div>
      </div>
      <div class="container">
        <div class="showHover">
          
          <div class="bigtitle">
            <span>学车流程</span>
          </div>
          <div class="con">
            <div class="item" v-for="(processItem, i) in process" :key="i">
              <img :src="processItem.imgurl" alt="" />
              <nuxt-link :to="{name:processItem.linksrc,query: { sub: processItem.sub,group:group }}">
                <div class="rightText">
                  <span class="title curp">{{ processItem.title }}</span>
                  <span class="tips">{{ processItem.tips }}</span>
                </div>
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 理论考试 -->
    <section class="theoryTest">
      <div class="container">
        <div class="title">
          <span>2021小车理论考试</span>
        </div>
        <div class="sub">
          <div class="left subItem">
            <div class="subItemTitle">
              <img src="~/assets/images/subtitle.png" alt="" class="subImg" />
              <span class="titleColor curp">科目一交规</span>
            </div>
            <div class="subTypes">
              <div
                class="typeItem"
                v-for="subItem in subItemListSubOne"
                :key="subItem.title"
              >
                <nuxt-link :to="{name:subItem.link,query: { sub: subItem.sub,group:group,type:subItem.title,category:subItem.category ,random:subItem.random,difficulty:subItem.difficulty}}">
                  <span class="curp">{{ subItem.title }}</span>
                </nuxt-link>
                <span class="tips">{{ subItem.tips }}</span>
              </div>
            </div>
            <div class="subBtn">
              <nuxt-link :to="{name:'examination-practice',query: { sub:1, category: 1, 
                         group: 1,}}">
                <span>模拟考试</span>
              </nuxt-link>
            </div>
          </div>
          <div class="right subItem">
            <div class="subItemTitle">
              <img src="~/assets/images/subtitle.png" alt="" class="subImg" />
              <span class="titleColor curp">科目四安全文明驾驶</span>
            </div>
            <div class="subTypes">
              <div
                class="typeItem"
                v-for="subItem in subItemListSubFour"
                :key="subItem.title"
              >
                <nuxt-link :to="{name:subItem.link,query: { sub: subItem.sub ,group:group,type:subItem.title,category:subItem.category,random:subItem.random,difficulty:subItem.difficulty}}">
                  <span class="curp">
                    {{ subItem.title }}
                  </span>
                </nuxt-link>
                <span class="tips">{{ subItem.tips }}</span>
              </div>
            </div>
            <div class="subBtn">
              <nuxt-link :to="{name:'examination-practice',query: { sub:4, category: 1, 
                         group: 1, }}">
                <span>模拟考试</span>
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 排行榜 -->
    <section class="coachRanking">
      <div class="container">
        <div class="title">
          <span>驾校教练排行</span>
          <span class="tips">口碑人气排行榜，助你轻松找驾校</span>
        </div>
        <div class="ranklist">
          <div class="listItem">
            <div class="title">权威排行榜</div>
            <div class="listBox">
              <div
                class="authority"
                v-for="(authority, i) in schoolListQw"
                :key="i"
              >
                <div class="left">
                  <span :class="i > 2 ? 'soltNum soltNumnor' : 'soltNum'">{{
                    i + 1
                  }}</span>
                  <nuxt-link :to="{name:'school-schoolDetails-id',query: { schoolId: authority.id}}">
                    <span v-if="i != 0" class="curp">{{
                      authority.short_title
                    }}</span>
                  </nuxt-link>
                </div>
                <span class="people" v-if="i != 0"
                  >{{ authority.sCount }}人</span
                >
                <div class="right" v-if="i == 0">
                  <img :src="authority.head_img" alt="" class="schoolImg" />
                  <div class="content firstContent">
                    <nuxt-link  :to="{name:'school-schoolDetails-id',query: { schoolId: authority.id}}">
                      <span class="contenttitle curp">{{
                        authority.short_title
                      }}</span>
                    </nuxt-link>
                    <div class="starBox">
                      <img
                        src="~/assets/images/rankstar.png"
                        alt=""
                        v-for="num in authority.cAvg"
                        :key="num"
                      />
                      <img v-if="authority.cAvg<5" src="~/assets/images/rankstarhui.png" alt=""  v-for="num in (5-authority.cAvg)"
                        :key="num">
                    </div>
                    <span class="tips">{{ authority.address }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="listItem">
            <div class="title">口碑排行榜</div>
            <div class="listBox">
              <div
                class="authority"
                v-for="(authority, i) in schoolListKb"
                :key="i"
              >
                <div class="left">
                  <span :class="i > 2 ? 'soltNum soltNumnor' : 'soltNum'">{{
                    i + 1
                  }}</span>
                    <nuxt-link  :to="{name:'school-schoolDetails-id',query: { schoolId: authority.id}}">
                  <span v-if="i != 0" class="curp">{{
                    authority.short_title
                  }}</span>
                       </nuxt-link>
                </div>
                <span class="people comment" v-if="i != 0"
                  >{{ authority.cCount }}点评</span
                >
                <div class="starBox" v-if="i != 0">
                  <img
                    src="~/assets/images/rankstar.png"
                    alt=""
                    v-for="num in authority.cAvg"
                    :key="num"
                  />
                 <img v-if="authority.cAvg<5" src="~/assets/images/rankstarhui.png" alt=""  v-for="hui,huii in (5-authority.cAvg)"
                        :key="huii">
                </div>
                <div class="right" v-if="i == 0">
                  <img :src="authority.head_img" alt="" class="schoolImg" />
                  <div class="content firstContent">
                       <nuxt-link  :to="{name:'school-schoolDetails-id',query: { schoolId: authority.id}}">
                    <span class="contenttitle curp">{{
                      authority.short_title
                    }}</span>
                     </nuxt-link>
                    <div class="starBox">
                      <img
                        src="~/assets/images/rankstar.png"
                        alt=""
                        v-for="num in authority.cAvg"
                        :key="num"
                      />
                      <img v-if="authority.cAvg<5" src="~/assets/images/rankstarhui.png" alt=""  v-for="num in (5-authority.cAvg)"
                        :key="num">
                    </div>
                    <span class="tips">{{ authority.address }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="listItem">
            <div class="title">教练排行榜</div>
            <div class="listBox">
              <sortCoach
                v-for="(item, i) in coachList"
                :key="i"
                :coachItem="item"
                :sortNum="i"
              ></sortCoach>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 推荐 -->
    <section class="recommendation">
      <div class="container">
        <div class="title">
          <span>驾校推荐</span>
          <span class="tips">优质学校推荐，满足你的多方面需求</span>
        </div>
        <div
          v-swiper:mySwiperSchool="swiperOptionSchool"
          class="swiper-container swiper-container-School"
        >
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, idx) in schoolListRe"
              :key="idx"
            >
              <drivingSchool :schoolData="item"></drivingSchool>
            </div>
          </div>
          <div class="swiper-pagination swiper-pagination-bullets"></div>
        </div>
      </div>
    </section>
    <section class="go">
      <img src="~/assets/images/go.png" alt="" />
    </section>
    <!-- 学车指南 -->
    <section class="guide">
      <div class="container">
        <div class="title">
          <span>学车指南</span>
        </div>
        <div class="container">
          <div class="tab">
            <div
              :class="tabindex == i ? 'tabItem acStyle' : 'tabItem '"
              v-for="(tabItem, i) in tablist"
              :key="i"
              @click="changeTab(i, tabItem)"
            >
              <span class="titleColor curp">{{ tabItem.title }}</span>
            </div>
          </div>
          <div class="tabcontent">
            <div class="item" v-for="(articleItem, i) in articleList">
              <div class="left">
                <img :src="articleItem.picture[0]" alt="" />
              </div>
              <div class="right">
                <nuxt-link :to="{name:'guide-guideDetails-id',query: { articleId: articleItem.id }} ">
                <span class="titleColor curp">{{ articleItem.title }}</span>
                </nuxt-link>
                <span class="tips">{{ articleItem.description }} </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 流程 -->
    <section class="process">
      <div class="container">
        <div class="title">
          <span>学车流程</span>
          <span class="tips"
            >万骏驾考整合学车流程，为用户提供全方位学车服务</span
          >
          <span class="tips"
            >我们致力已经发展全国各地<b>50+</b>家学员人数超过<b>2000+</b>我们将以专业可靠的技术服务于更多的学员</span
          >
        </div>
        <div class="processBox">
          <div v-for="(processItem, i) in processList" :key="i">
            <nuxt-link :to="{name:processItem.link,query: { sub: processItem.sub }}" class="processItem curp">
              <img :src="processItem.url" alt="" />
              <span>{{ processItem.name }}</span>
            </nuxt-link>
          </div>
        </div>
      </div>
    </section>
    <!-- 展示区 -->
    <!-- <section class="exhibitionArea">
      <img src="~/assets/images/phone.png" alt="" />
    </section> -->
  </div>
</template>

<script>
import drivingSchool from "@/components/drivingSchool.vue";
import sortCoach from "@/components/sortCoach.vue";
import { mapGetters, mapState } from "vuex";
import {
  cityfilter,
  school,
  coach,
  articleOption,
  article,
  
} from "~/api/commen";
export default {
  components: {
    drivingSchool,
    sortCoach,
  },
  data() {
    return {
      group:1,
      tabindex: 0, //学车指南tab
      processList: [
        {
          name: "找驾校",
          url: require("~/assets/images/processItem0.png"),
          link: "school",

        },
        {
          name: "科目一",
          url: require("~/assets/images/processItem1.png"),
          link: "examination-subjectOF",
          sub:1,
            group:1,
        },
        {
          name: "科目二",
          url: require("~/assets/images/processItem2.png"),
          link: "examination-subjectTT",
            sub:2
        },
        {
          name: "科目三",
          url: require("~/assets/images/processItem3.png"),
          link: "examination-subjectTT",
            sub:3
        },
        {
          name: "科目四",
          url: require("~/assets/images/processItem4.png"),
          link: "examination-subjectOF",
            sub:4,
              group:1,
        },
        {
          name: "拿本",
          url: require("~/assets/images/processItem5.png"),
          // link: "/",
        },
      ],

      subItemListSubOne: [
        { title: "顺序练习", tips: "按照顺序练习做题" ,sub:1,link:'examination-questions',category:1},
        { title: "随机练习", tips: "按照随机练习做题",sub:1 ,link:'examination-questions',category:1,random:1},
        { title: "专项练习", tips: "分门别类重点突破" ,sub:1,link:'examination-chapter',category:1},
        { title: "难点攻克", tips: "准确把我考试难点",sub:1 ,link:'examination-questions',category:1,difficulty:1},
      ],
      subItemListSubFour: [
        { title: "顺序练习", tips: "按照顺序练习做题" ,sub:4,link:'examination-questions',category:1},
        { title: "随机练习", tips: "按照随机练习做题",sub:4 ,link:'examination-questions',category:1,random:1},
        { title: "专项练习", tips: "分门别类重点突破" ,sub:4,link:'examination-chapter',category:1},
        { title: "难点攻克", tips: "准确把我考试难点",sub:4 ,link:'examination-questions',category:1,difficulty:1},
      ],
      bannerData: [
        {
          imgUrl:require('~/assets/images/banner1.png'),
        },
        {
          imgUrl:require('~/assets/images/banner2.png'),
        },

      ],
      swiperOption: {
         loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        slidesPerView: "auto",
        centeredSlides: true,
        on: {
          slideChange() {},
          tap() {},
        },
      },
      swiperOptionSchool: {
        loop: true,
        autoUpdate: false,
        observer: true,
        observeParents: true,
        slidesPerView: "2",
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },

        on: {
          slideChange() {},
          tap() {},
        },
      },

      // 选择学车流程
      process: [
        {
          title: "科目一",
          tips: "真实案列，通过率高",
          imgurl: require("~/assets/images/sub1.png"),
          linksrc: "examination-subjectOF",
          sub:1
        },
        {
          title: "科目二",
          tips: "精选视频，详解考点",
          imgurl: require("~/assets/images/sub2.png"),
          linksrc: "examination-subjectTT",
              sub:2
        },
        {
          title: "科目三",
          tips: "大路，知识及技巧",
          imgurl: require("~/assets/images/sub3.png"),
          linksrc: "examination-subjectTT",
              sub:3
        },
        {
          title: "科目四",
          tips: "2021新题库",
          imgurl: require("~/assets/images/sub4.png"),
          linksrc: "examination-subjectOF",
              sub:4
        },
      ],
      page: this.$route.query.page || 1,
      rows: this.$route.query.rows || 8,
      schoolListQw: [],
      schoolListKb: [],
      coachList: [],
    };
  },
  async asyncData({ app, query, params }) {

    let [
      schoolListQw,
      schoolListKb,
      coachList,
      schoolListRe,
      tablist,
      articleList,
    ] = await Promise.all([
      await school({ page: 1, rows: 10}),
      await school({ page: 1, rows: 10, order: "score"}),
      await coach({ page: 1, rows: 8, order: "score" }),
      await school({ page: 1, rows: 6, order: "recommend" }),
      await articleOption(),
      await article({ page: 1, rows: 6, category: 0}),
    ]);
 
    return {
      // city: data,
      schoolListQw: schoolListQw.list,
      schoolListKb: schoolListKb.list,
      coachList: coachList.list,
      schoolListRe: schoolListRe.list,
      tablist: tablist,
      articleList: articleList.list,
    };
  },
  mounted(){
   
  },

  methods: {
    // 学车指南切换
    changeTab(val, tabItem) {
      this.tabindex = val;
      this.getarticleList(tabItem.id);
    },
  
    //文章列表
    async getarticleList(category) {
      let articleList = await article({ page: 1, rows: 6, category: category });
      this.articleList = articleList.list;
    },
  },
};
</script>
<style lang="scss">
@import "~/assets/css/index.scss";
</style>
